<template>
    <div class="dynamic-proxy-container">
        <!-- 静态壁纸 + 动态壁纸-->
        <div class="basic-background">
            <component :is="dynamicBackground"></component>
            <!--

         -->
        </div>
        <!-- 动效 -->
        <div class="background-effect">
            <component :is="$store.getters.dynamicBackground"></component>
        </div>
    </div>
</template>
<script>
import { mapState } from "vuex";
import { backgroundTypes } from "./index";
export default {
    components: {
        BubbleBackground: () => import("./effects/bubble"),
        SnowBackground: () => import("./effects/snow"),
        EmptyBackground: () => import("./effects/empty"),
        BackgroundStatic: () => import("./backgrounds/static"),
        BackgroundDynamic: () => import("./backgrounds/dynamic"),
    },
    mounted() {
        this.$nextTick(() => {
            const video = this.$el.querySelector("#video");
            if (video) {
                video.click();
                video.play();
            }
        });
    },
    computed: {
        ...mapState("setting", {
            backgroundType: (state) => state.background.type,
        }),
        dynamicBackground: function () {
            const backgroundType = this.backgroundType || 0; // 默认为静态背景
            // backgroundType为0、1、2所以通过数组映射
            return "background-" + backgroundTypes[backgroundType];
        },
    },
};
</script>
<style lang="less">
.dynamic-proxy-container {
    position: relative;
    width: 100%;
    height: 100%;
    .basic-background {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
    .background-effect {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 2;
    }
}
</style>
